<template>
  <div class="content">

    <!-- <div class="content-title">
      泰隆银行瑞幸
    </div> -->

    <div class="content-tb" v-if="datalist.length>0">
      <div class="content-tb-title">
        活动列表
      </div>
     
      <div class="content-chartortests" v-for="(item,index) in datalist" :key="index" @click="godet(item.id)">
        <div class="activity-name">{{ item.activityName }}</div>
        <div class="tb-index">
          <table>
            <tr>
              <th>总预算</th>
              <th>已消耗总额</th>
              <th>剩余总额</th>
              <th>状态</th>
            </tr>
            <tr>
             
              <td>{{ returnFloat(item.allAmount) }}</td>
              <td>{{ returnFloat(item.consumeAmount) }}</td>
              <td>{{ returnFloat(item.surplusAmount) }}</td>
              <td :class="item.status==0?'':'color-bt'">
                {{ item.status==0?"启用":"停用" }}</td>
            </tr>
            
  
          </table>
        </div>
        
        
      </div>
    </div>
   
    

    

    <!-- <div ref="echartview" class="echartview"></div> -->
    <!-- <div class="title">测试首页</div> -->
    <!-- <div id="main"></div> -->
    <!-- <canvas id="main"></canvas> -->
  </div>
</template>
<script>
// import * as echarts from 'echarts';
import testApi from "@/api/test";
import {getactList} from "@/api/api";

// import {getactList} from "@/api/testrq"


export default {
  name: 'Home',
  data () {
    return {
      msg: 'Hello Vue!',
      datalist:[]
    }
  },
  mounted () {
    document.title="数据汇总"
    // testApi.actList({id:230}).then(res=>{
    //   console.log(res)
    // })
    // getactList(JSON.stringify({v:"2ZWqCHlrFq%2FcUnHLC1QJAA%3D%3D"})).then(res=>{
    //   console.log("reqtext",res)
    // })
    // getactLis


    // var date={v:"2ZWqCHlrFq%2FcUnHLC1QJAA%3D%3D"}
    // console.log(JSON.stringify(date))
    // getactList().then(res=>{
    //   console.log(res)
    // })
    let data={}
      data.id=this.$route.query.id
    
    
    
    testApi.getactList(data).then(res=>{
      console.log(res.data.activityList)
      if(res.data.result==0){
       this.datalist=res.data.activityList
      }

    })
   

  },
  methods:{
    godet(id){
      this.$router.push({path:'/det',query: {id:id,type:1}})
    },
    returnFloat(num) {
  num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
  if (num.indexOf(".") !== -1) {
    let [integerPart, decimalPart] = num.split(".");
 
    if (decimalPart.length > 2) {
      decimalPart = decimalPart.substring(0, 2);
    } else if (decimalPart.length === 1) {
      decimalPart += "0";
    }
 
    num = `${integerPart}.${decimalPart}`;
  } else {
    num += ".00";
  }
 
  return num;
}
  },
  /**
   * 清除echartresize事件
   */
  beforeDestroy () {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦 */
   
  },
}
</script>
<style  scoped lang="less">
.title {
  font-size: 24px;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.echartview {
  width: 100%;
  height: 100%;
  position: relative;

}

.echartview canvas {
  width: 100% !important;
  height: 100% !important;
}

.content {
  width: 100%;
  height: 100vh;
  // background-color: aliceblue;
}

.content-title {
  font-size: 18px;
  font-weight: bold;
  padding-top: 20px;
  padding-left: 10px;

}

.content-tb-title {
  margin-left: 10px;
  border-left: 5px solid #5d8dff;
  padding-left: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: bold;
}

.content-chartortests {
  width: calc(100% - 20px);
  margin: 0 auto;
  margin-top: 10px;
  box-sizing: border-box;
  height: auto;
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
flex-wrap: wrap;
padding: 10px 10px;
  // align-items: center;
}
.activity-name{
  width: 100%;
  
}
.tb-index{
    width: 100%;
    border-radius: 0px;
    margin-top: 5px;
    display: block;
    height: auto;
    table{
      display: table;
      table-layout: fixed;
  
    }
    tr >th{
      text-align: center;
      background: #5d8dff;
      height: 30px;
      border-right: 1px solid #e9e9ff;
      color: white;
    }
    tr >td{
      text-align: center;
      padding: 5px 0;
      // background: #5d8dff;
    }

  }
  .color-bt{
    color: #b3b3b3;
  }

</style>
